<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style>
			* {
				box-sizing: border-box;
				padding: 0;
				margin: 0;
			}

			body {
				/* 把 body 的高度定为 整个视窗高度 */
				height: 100vh;
			}

			.header,
			.main,
			.footer {
				width: 100%;
			}

			.header {
				height: 50px;
				border: 1px solid black;
				text-align: center;
				z-index: 1000;
			}

			.main {
				/* main的高度： 100% -（把 header 和footer 区域高度）剪掉的值，即可 */
				height: calc(100% - 100px);
				overflow: scroll;
				border: 1px solid blue;
			}

			ul>li {
				margin: 20px 0;
				padding: 10px 0;
			}

			.footer {
				height: 50px;
				border: 1px solid black;
				text-align: center;
			}
		</style>
	</head>

	<!-- 
	
	vh 这个单位
	 https://developer.mozilla.org/zh-CN/docs/Web/CSS/length
	 
	 布局要点 给 body 高度设定好，
	 header 高度设定
	 footer 高度设定
	 
	 main 的高度：通过 css 计算函数得出 calc(100% - 100px)
	
	 -->
	<body>

		<div class="header">header</div>

		<div class="main">

			<ul>
				<li>111111111</li>
				<li>111111111</li>
				<li>111111111</li>
				<li>111111111</li>
				<li>111111111</li>
				<li>111111111</li>
				<li>111111111</li>
				<li>111111111</li>



				<li>222222222</li>
				<li>222222222</li>
				<li>222222222</li>
				<li>222222222</li>
				<li>222222222</li>
				<li>222222222</li>


				<li>3333333333</li>
				<li>3333333333</li>
				<li>3333333333</li>
				<li>3333333333</li>
				<li>3333333333</li>
				<li>3333333333</li>


				<li>4444444444</li>
				<li>4444444444</li>
				<li>4444444444</li>
				<li>4444444444</li>
				<li>4444444444</li>
				<li>4444444444</li>
				<li>4444444444</li>


				<li>555555555555</li>
				<li>555555555555</li>
				<li>555555555555</li>
				<li>555555555555</li>
				<li>555555555555</li>
				<li>555555555555</li>
				<li>555555555555</li>
			</ul>
		</div>

		<div class="footer">footer</div>

	</body>
</html>
